---
title: AstroサイトをVercelにデプロイする
description: VercelでAstroサイトをウェブにデプロイする方法。
type: deploy
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

[Vercel](http://vercel.com/)を使用して、グローバルなエッジネットワークに設定無しでAstroサイトをデプロイできます。

このガイドでは、ウェブサイトのUIまたはVercelのCLIを使ってVercelにデプロイする手順を紹介します。

## プロジェクトの設定

Astroプロジェクトは、静的サイトまたはサーバーサイドレンダリング（SSR）されるサイトとしてVercelにデプロイできます。

### 静的サイト

Astroプロジェクトはデフォルトで静的サイトです。静的なAstroサイトをVercelにデプロイするために追加の設定は必要ありません。

### SSRアダプター

AstroプロジェクトでSSRを有効にしてVercelにデプロイする方法について説明します。

以下の`astro add`コマンドにより、AstroプロジェクトでSSRを有効にするための[Vercelアダプター](/ja/guides/integrations-guide/vercel/)を追加します。これにより、アダプターのインストールと、`astro.config.mjs`ファイルへの適切な変更が1ステップで行われます。

```bash
npx astro add vercel
```

アダプターを手動でインストールする場合は、次の2つの手順を実行してください。

1. お好みのパッケージマネージャーを使用して、[`@astrojs/vercel`アダプター](/ja/guides/integrations-guide/vercel/)をプロジェクトの依存関係にインストールします。npmを使用している場合、あるいはよくわからない場合は、次のコマンドをターミナルで実行してください。

    ```bash
      npm install @astrojs/vercel
    ```

1. プロジェクトの設定ファイル`astro.config.mjs`に2行追加します。

    ```js title="astro.config.mjs" ins={2, 5-6}
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';

    export default defineConfig({
      output: 'server',
      adapter: vercel(),
    });
    ```

## デプロイ方法

Vercelへのデプロイは、ウェブサイトのUIまたはVercelのCLI（コマンドラインインターフェイス）が利用できます。静的サイト、SSRサイトともに手順は同じです。

### ウェブサイトのUIからのデプロイ

1. コードをオンラインのGitリポジトリ（GitHub、GitLab、BitBucket）にプッシュします。
2. Vercelに[プロジェクトをインポート](https://vercel.com/new)します。
3. Vercelが自動的にAstroを検出し、適切な設定を行います。
4. アプリケーションがデプロイされます！ (例：[astro.vercel.app](https://astro.vercel.app/))

プロジェクトがインポート・デプロイされると、その後のブランチへのプッシュはすべて[プレビューデプロイ](https://vercel.com/docs/concepts/deployments/preview-deployments)を生成し、またプロダクションブランチ（通常は「main」）に加えられたすべての変更は[本番環境へのデプロイ](https://vercel.com/docs/concepts/deployments/environments#production)となります。

<ReadMore>Vercelの[Git連携](https://vercel.com/docs/concepts/git)についてもっと学ぶ。</ReadMore>


### CLIからのデプロイ

1. [Vercel CLI](https://vercel.com/cli)をインストールし、`vercel`を実行してデプロイします。

    ```bash
    npm install -g vercel
    vercel
    ```

2. Vercelが自動的にAstroを検出し、適切な設定を行います。
3. `Want to override the settings? [y/N]`（「設定を上書きしますか？」）と聞かれたら、`N`を選択します。
4. アプリケーションがデプロイされます！ (例：[astro.vercel.app](https://astro.vercel.app/))


### vercel.jsonによるプロジェクト設定

`vercel.json`を使用して、Vercelのデフォルトの動作を上書きしたり、追加の設定を行うことができます。たとえば、デプロイ環境からのHTTPレスポンスにヘッダーを追加する場合などに使用します。

<ReadMore>[Vercelのプロジェクト設定](https://vercel.com/docs/project-configuration)についてもっと学ぶ。</ReadMore>

### Astro 2.0へのアップグレード

Astro v2.0はNode 14のサポートを終了しているため、プロジェクトでは**Node `18.14.1`以降**を使用するようにしてください。ビルドステップとサーバーレス関数で使用するNode.jsのバージョンは、Project SettingsにあるGeneralページから[定義できます](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings)。
